<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="title" ref="topFilter">
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="confirmSingleSelectYears">
      </single-list-filter-without-cb>
      <double-check-filter @confirmDoubleSelect="confirmSingleSelectPlanArea" defaultText="统筹区" :filter="filterN"
                           type="planArea" :isParentLinkChild="true"></double-check-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filterN" :type="'insuredTypeSe'"
                                     @confirmSingleSelect="confirmSingleSelectInsuredType"></single-list-filter-without-cb>
      <single-list-filter @confirmSingleSelect="confirmSingleSelectHospitalRankType" defaultText="医院等级"
                          :filter="filterN" type="hospLevel" :isParentLinkChild="true"></single-list-filter>
    </top-filter>
    <div class="chart-container">
      <div id="hospitalInPeopleNumAnalyseRightId" style="position: absolute;width: 100%;height: 82.5%;">
      </div>
      <div class="chart-type1 hosp-people-analyse-right">
        <div class="people-num-top">
          <div class="show-text-wrapper-hos-name"></div>
          <div class="show-text-wrapper">
            <span class="people-left-span"></span>人数
          </div>
          <div class="show-text-wrapper">
            <span class="people-right-span"></span>人次
          </div>
        </div>
        <!--<div class="middle-text-wrapper">下为TOP8：</div>-->
        <div class="data-people-num-analyse-wrapper">
          <div v-for="(item,index) in showDataList" class="people-num-top-content">
            <div class="show-text-wrapper-hos-name">
              <el-tooltip class="item" effect="dark" :content="item.hospName" placement="right">
                <p class="hospital-name-title">{{getStartSevenText(item.hospName)}}</p>
              </el-tooltip>
            </div>
            <div class="show-text-wrapper">
              <h1 class="decrease-text">{{item.totalPerCount}}</h1>
              <div class="rate-content-wrapper">
                <p :class="getRateIsDecreaseOrIncrease(item.totalPerCountYY)"><span
                  class="same-compare">同比</span>{{getRateText(item.totalPerCountYY)}}&nbsp;&nbsp;{{item.totalPerCountYY}}%
                </p>
              </div>
            </div>
            <div class="show-text-wrapper">
              <h1 class="increase-text">{{item.totalPerTime}}</h1>
              <div class="rate-content-wrapper">
                <p :class="getRateIsDecreaseOrIncrease(item.totalPerTimeYY)">
                  <span
                    class="same-compare">同比</span>{{getRateText(item.totalPerTimeYY)}}&nbsp;&nbsp;{{item.totalPerTimeYY}}%
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <summarize :showSummarizeText="conclusion"></summarize>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {setChartHeight, loadingOpt} from '../../../assets/js/utils.js'
  import TopFilter from '../filter/top-filter1.vue'
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import DoubleCheckFilter from '../filter/double-check-filter.vue'
  import SingleListFilter from '../filter/single-list-filter.vue'
  import Summarize from '../summarize/summarize.vue'
  import {getHospitalInPeopleNumDataRight} from '../../../api/last-api'
  import {
    getDefaultYear,
    getDefaultAreaCode,
    getDefaultHospLevel,
    getDefaultInsuredTypeWithoutAll
  } from './utils/dataUtils'
  export default {
    props: ['isChange', 'filter'],
    components: {
      Summarize,
      TopFilter,
      SingleListFilterWithoutCb,
      DoubleCheckFilter,
      SingleListFilter
    },
    data () {
      return {
        isShowChart: false,
        filterN: JSON.parse(JSON.stringify(this.filter)),
        itemStyle: {
          height: '300px'
        },
        showDataList: [],
        title: '',
        conclusion: '',
        areaCode: getDefaultAreaCode(this.filter).join(','),
        hospLevel: getDefaultHospLevel(this.filter),
        medicalCategory: getDefaultInsuredTypeWithoutAll(this.filter),
        queryYear: getDefaultYear(this.filter),
      }
    },
    mounted(){
      setChartHeight()
      this.myChart = this.$echarts.init(document.getElementById('hospitalInPeopleNumAnalyseRightId'), null, {renderer: 'canvas'})
      this.getHospitalInPeopleNumDataRight()
//      this.setDataIntoCharts(require('./test/hospitalInNumAnalyseRight.json').data)
    },
    methods: {
      getStartSevenText(item) {
        if (item.length > 7) {
          return item.substring(0, 7) + '...'
        }
        return item
      },
      getRateIsDecreaseOrIncrease (rate) {
        return {
          'increase-text-rate': rate >= 0,
          'decrease-text-rate': rate < 0
        }
      },
      getRateText(rate) {
        if (rate >= 0) {
          return '↑'
        } else {
          return '↓'
        }
      },
      getHospitalInPeopleNumDataRight() {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          document.querySelector('#hospitalInPeopleNumAnalyseRightId').style.zIndex = 1
          this.myChart.showLoading(loadingOpt)
          getHospitalInPeopleNumDataRight(this.areaCode, this.hospLevel, this.medicalCategory, this.queryYear).then((res) => {
            document.querySelector('#hospitalInPeopleNumAnalyseRightId').style.zIndex = -1
            this.myChart.hideLoading();
            if (res.code == 0) {
              this.setDataIntoCharts(res.data)
            }
          }).catch(err => {
          })
        }, 300)
      },
      setDataIntoCharts(response) {
        // 设置顶部的标题
        this.title = response.reportName
        // 设置结论
        this.conclusion = response.reportConclusion
        this.showDataList = response.treatments
      },
      confirmSingleSelectYears(filter) {
        this.queryYear = filter
        this.getHospitalInPeopleNumDataRight();
      },
      confirmSingleSelectPlanArea(filter) {
        this.areaCode = filter.join(',')
        this.getHospitalInPeopleNumDataRight();
      },
      confirmSingleSelectInsuredType(filter){
        this.medicalCategory = filter
        this.getHospitalInPeopleNumDataRight();
      },
      confirmSingleSelectHospitalRankType(filter) {
        this.hospLevel = filter.join(',')
        this.getHospitalInPeopleNumDataRight();
      },
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      }
    }
  };
</script>

<style>
  .people-num-top {
    display: flex;
    width: 100%;
    margin: 10px 15px 0 15px;
  }

  .people-num-top-content {
    display: flex;
    width: 100%;
    margin: 0 15px;
    flex: 1;
  }

  .data-people-num-analyse-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .middle-text-wrapper {
    margin-left: 20px;
  }

  .show-text-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    /*margin-left: 50px;*/
  }

  .show-text-wrapper-hos-name {
    flex: 1.2;
    line-height: 18px;
    text-align: right;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .hospital-name-title {
    margin-right: 75px;
    display: inline-block;
    cursor: pointer;
  }

  .people-left-span {
    display: inline-block;
    width: 30px;
    height: 6px;
    margin-right: 10px;
    background: #119DFB;
  }

  .people-right-span {
    display: inline-block;
    width: 30px;
    height: 6px;
    margin-right: 10px;
    background: #FFD769;
  }

  .decrease-text {
    color: #129cff;
    font-size: 16px;
    display: inline-block;
  }

  .decrease-text-rate {
    color: #ff6a93;
    font-size: 14px;
  }

  .same-compare {
    color: #ffffff;
    margin-right: 10px;
    font-size: 13px;
  }

  .increase-text {
    color: #ffd66a;
    font-size: 16px;
    display: inline-block;
  }

  .increase-text-rate {
    color: #57d5bb;
    font-size: 13px;
  }

  .rate-content-wrapper {
    display: inline-block;
    margin-left: 10px;
  }

  .hosp-people-analyse-right {
    display: flex;
    flex-direction: column;
  }

  .noStyle {
    border: 0;
    background: 0;
    padding: 0;
    margin: 0;
    color: inherit;
  }


</style>
